<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.插值与指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>

    <!-- 准备一个容器 -->
    <div id="demo">
      <!-- Vue的世界里，模板语法只有两种：插值、指令 -->
      <!-- 插值语法：向标签体中插入指定数据 -->
      <h2>插值语法：</h2>
      <h2>{{school}}坐落于{{address}}</h2>
      <hr>
      <!-- 指令语法：向标签中插入指定数据 -->
      <h2>指令语法：</h2>
      <a 
        v-bind:href="url" 
        a="url" 
        v-bind:b="url" 
        c="1+1" 
        v-bind:d="1+1"
        e="url.toUpperCase()"
        v-bind:f="url.toUpperCase()"
      >
        点我去{{school}}学习
      </a>
    </div>

    <!-- 创建Vue实例对象 -->
    <script type="text/javascript" >
      new Vue({
        el:'#demo',
        data:{
          school:'尚硅谷',
          address:'宏福科技园',
          url:'http://www.atguigu.com',
        }
      })
    </script>
  </body>
</html>